import React,{useRef,useState} from 'react';
import styles from './MessageBox.module.css'; // Assuming you have a CSS module for styling
function MessageBox({message,isVisible, onClose}) {
    const messageBoxRef = useRef(null);
    // const [isVisible, setIsVisible] = useState(true);

    const handleClose = () => {
        // setIsVisible(false);
        if (onClose) {
            onClose();
        }
    };

    return (
        isVisible && (
            <div className="message-box" ref={messageBoxRef}>
                <div className="message-content">
                    {message}
                </div>
                <button className="close-button" onClick={handleClose}>
                    Close
                </button>
            </div>
        )
    );
}
export default MessageBox;